import { getLayoutProps } from "@/common/layout/getProps";
import { PageContainer } from "@ant-design/pro-layout";
import { Button, Form, InputNumber, Row, Space, Table, type TableColumnsType } from "antd";
import { useRouter } from "next/router";
import { type FC, type HTMLAttributes, type PropsWithChildren, useEffect, useState } from "react";
import styles from "./ratingTable.module.scss";

type TableDataType = Record<string, any>;

interface EditableCellProps extends HTMLAttributes<HTMLElement> {
  editing: boolean;
  dataIndex: string;
  title: any;
  record: TableDataType;
  index: number;
}

const EditableCell: FC<PropsWithChildren<EditableCellProps>> = ({
  editing,
  dataIndex,
  title,
  record,
  index,
  children,
  ...restProps
}) => {
  const inputNode = <InputNumber className={"w-full"} min={0}/>;

  return (
    <td {...restProps}>
      {editing ? (
        <Form.Item
          name={dataIndex}
          style={{margin: 0}}
          rules={[
            {
              required: true,
              message: `Please Input ${title}!`
            }
          ]}
        >
          {inputNode}
        </Form.Item>
      ) : (
        children
      )}
    </td>
  );
};

const RatingTable = () => {
  const router = useRouter();
  const {query} = router;
  const {id} = query;
  const [data, setData] = useState<Partial<Record<string, any>>>({});
  const [editTableData, setEditTableData] = useState<Partial<Record<string, any>>[]>([]);

  const getDetailById = () => {
    setData({
      id: 1,
      field1: "Mr.Wang",
      field2: "创新部",
      field3: "总监",
      field4: "EMBA",
      field5: Math.round(Math.random()),
      img: "http://xxxx.png",
      desc: "认真承接上级领导指派的工作，按时完成工作，完成工作的数量、质量，同时，积极与客户沟通，解决问题，提升客户满意度，为项目的后续推进奠定了坚实基础。"
    });
  };

  const getEditTableData = () => {
    setEditTableData(Array(5).fill(0).map((_, i) => {
      return {
        id: i + 1 + "",
        field1: `项目${i + 1}`,
        field2: '内容',
        field3: "20分",
        field4: "30分",
        field5: "10分",
        field6: "",
      }
    }))
  }

  useEffect(() => {
    getDetailById();
    getEditTableData();
  }, []);

  const editTableColumns: TableColumnsType = [
    {
      align: "center",
      title: "序号",
      width: 60,
      key: "index",
      render: (_text: string, _record, index: number) => {
        return index + 1
      }
    },
    {
      align: "center",
      title: "赋分项目",
      dataIndex: "field1"
    },
    {
      align: "center",
      title: "评价内容",
      dataIndex: "field2"
    },
    {
      align: "center",
      title: "好",
      dataIndex: "field3"
    },
    {
      align: "center",
      title: "较好",
      dataIndex: "field4"
    },
    {
      align: "center",
      title: "一般",
      dataIndex: "field5"
    }
  ]

  const editColumns = [
    {
      align: "center",
      title: "评分",
      width: 200,
      dataIndex: "field6"
    }
  ].map(col => {
    return {
      ...col,
      onCell: (record) => {
        return {
          record,
          dataIndex: "field4",
          editing: true
        }
      }
    }
  }) as TableColumnsType

  const EditTable = () => {
    return (
      <>
        <Table
          className={'mb-[20px]'}
          components={{
            body: {
              cell: EditableCell
            }
          }}
          dataSource={editTableData}
          columns={editTableColumns.concat(editColumns)}
          rowKey={"field1"}
          pagination={false}
        ></Table>
      </>
    )
  }

  return (
    <PageContainer>
      <Row className={"mb-[20px]"}>
        <div className={styles.cardItem}>
          <div className="top">
            <div className="avatar">
              <img src={"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"} alt=""/>
            </div>
            <div className="info">
              <div className="name">{data.field1}</div>
              <div className="bumen">{data.field2}</div>
              <div className="zhiwei">{data.field3}</div>
              <div className="zhicheng">技术职称：{data.field4}</div>
            </div>
          </div>
          <div className="bottom">
            <div>季度工作业绩突出介绍：</div>
            <div className={"desc"}>{data.desc}</div>
          </div>
        </div>
      </Row>

      <EditTable />

      <Row justify={'end'} align={'middle'}>
        <Space>
          <span className={"font-bold text-[20px]"}>评价人：张总</span>
          <Button>返回</Button>
          <Button type={'primary'}>提交</Button>
        </Space>
      </Row>
    </PageContainer>
  );
};

export const getServerSideProps = getLayoutProps;
export default RatingTable;
